import { useEffect, useState } from "react";
import style from "./index.module.scss";

import Bottom from "../bottom";

import Top1 from "@/assets/images/annual-festival/top1.png";
import Top2 from "@/assets/images/annual-festival/top2.png";
import Top3 from "@/assets/images/annual-festival/top3.png";

import LogoBg1 from "@/assets/images/annual-festival/content/avatar1.png";
import LogoBg2 from "@/assets/images/annual-festival/content/avatar2.png";
import LogoBg3 from "@/assets/images/annual-festival/content/avatar3.png";

import { showToast } from "../util";
import classNames from "classnames";
import { BaseUrl } from "@/utils/index";
// import { mockData } from "../data.ts";
const Content = () => {
  const urlParams = new URLSearchParams(window.location.search);
  const authorizationToken = urlParams.get("userId");
  console.log("authorizationToken", authorizationToken);

  const [data, setData] = useState([]);
  const [info, setInfo] = useState({}); // 当前用户信息
  const getData = async () => {
    let url = `/gift/anniversary/anchor/rank`;
    fetch(BaseUrl + url, {
      method: "GET",
      headers: {
        Authorization: authorizationToken,
      },
    })
      .then((response) => response.json())
      .then((response) => {
        if (response.code === 200 && response.data) {
          setData(response.data?.list || []);
          setInfo(response.data.myRank);
        } else {
          setData([]);
          console.error(response.msg);
          showToast(response.msg);
        }
      })
      .catch((error) => console.error("请求失败", error));
  };

  useEffect(() => {
    if (authorizationToken) {
      getData();
    } else {
      console.error("Authorization token not found in URL");
    }
  }, []);

  return (
    <>
      <div className={classNames(style.content_wrap, style.content_zhubo)}>
        <div className={style.titleBox}></div>
        <div className={style.rank_container}>
          <div className={style.data_box}>
            {/* <div className={style.desc}>每收到1钻直刷礼物＝1魅力值</div> */}
            <div className={style.card}>
              {data.map((dataItem, i) => {
                return i < 3 ? (
                  <div
                    key={dataItem?.userId}
                    className={classNames(style.rankBox, {
                      [style.rankBox1]: i === 0,
                      [style.rankBox2]: i === 1,
                      [style.rankBox3]: i === 2,
                    })}
                  >
                    <img
                      src={i === 0 ? Top1 : i === 1 ? Top2 : Top3}
                      alt=""
                    ></img>
                    <div className={style.logoBox}>
                      <img
                        className={classNames(style.logoBg)}
                        src={i === 0 ? LogoBg1 : i === 1 ? LogoBg2 : LogoBg3}
                        alt=""
                      ></img>
                      <img
                        className={classNames(style.logo)}
                        src={dataItem?.avatar}
                        alt=""
                      ></img>
                    </div>
                    <div className={style.name}>{dataItem?.nickname}</div>
                    <div className={style.showValue}>
                      魅力值：{dataItem?.showValue}
                    </div>
                  </div>
                ) : null;
              })}

              <div className={style.rank_list}>
                {data.map(
                  (dataItem, i) =>
                    i > 2 && (
                      <div className={style.rankItem} key={dataItem?.userId}>
                        <div className={style.rank}>
                          {dataItem?.rank}
                          {/* {Number(dataItem?.rank) <= 9 ? dataItem?.rank : "9+"} */}
                        </div>
                        <div className={style.useBox}>
                          <img
                            src={dataItem?.avatar}
                            alt=""
                            // onClick={() => goUserPage(dataItem.userId)}
                          />
                          <div className={style.title}>{dataItem.nickname}</div>
                        </div>

                        <div className={style.score}>
                          <span>魅力值</span>
                          <span>{dataItem?.showValue}</span>
                        </div>
                      </div>
                    )
                )}
              </div>
            </div>
          </div>
          {/* <div className={style.bgRankBottom}> </div> */}
        </div>
      </div>
      <Bottom info={info} type={2} />
    </>
  );
};

export default Content;
